<template>
  <el-container>
      <el-header>
        <h3>推荐学员信息</h3>
      </el-header>
      <el-main>
        <el-table
          :data="reward"
          border
          :cell-style="changeStyle"
        >
          <el-table-column
            label="总奖励"
            prop="total"
          >
          </el-table-column>
          <el-table-column
            label="已奖励"
            prop="has_pay"
          >
          </el-table-column>
          <el-table-column
           label="未结算奖励"
           prop="not_pay"
          >
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.not_pay !== 0" type="primary" icon="el-icon-refresh" @click.prevent="clearMoney">结算</el-button>
              <el-button v-else type="primary" icon="el-icon-refresh" disabled>结算</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-form :inline="true" :model="form" ref="form">
            <el-form-item prop="query_field">
              <el-input type="text" placeholder="请输入姓名或者手机号码" v-model="form.query_field"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click.prevent="search">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click.prevent="reset('form')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          v-loading="loading"
        >
          <el-table-column
            label="头像"

          >
            <template slot-scope="scope">
              <el-avatar :src="scope.row.avatar" :size="50"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="recommended_name"
          >
          </el-table-column>
          <el-table-column
            label="手机号码"
            prop="recommended_mobile"
          >
          </el-table-column>
          <el-table-column
            label="推荐人"
            prop="recommend_name"
          >
          </el-table-column>
          <el-table-column
            label="添加时间"
            prop="recommend_time"
          >
          </el-table-column>
          <el-table-column
            label="进度"
            prop="degree"
          >
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          @current-change="changePage"
        >
        </el-pagination>
      </el-footer>
  </el-container>
</template>

<script>
  import { recommendReward, getRecommendInfo, clearReward} from '@/api/student'
    export default {
        name: "recommend",
        inject: ['reload'],
        data () {
            return {
                reward: [],
                student_id: 0,
                form: {
                    query_field: ''
                },
                tableData: [],
                loading: true,
                page: 1,
                pageSize: 10,
                total : 0,
            };
        },
        methods: {
            //结算当前所有未结算的钱
            clearMoney() {
                clearReward({student_id: this.student_id}).then(response => {
                      this.$message.success(response.msg);
                      this.reload();
                }).catch( err => {
                })
            },
            search() {
              var params = {
                  student_id: this.student_id
              };

              if (this.form.query_field.trim().length !== 0) {
                  params.query_field = this.form.query_field;
              }
              this.loading = true;
              getRecommendInfo(params).then(response => {
                  this.tableData = response.data.list;
                  this.page = response.data.pagination.current;
                  this.total = response.data.pagination.total;
                  this.pageSize = response.data.pagination.pageSize;
                  this.loading = false;
              }).catch( err => {
                  this.loading = false;
              });
            },
            reset(ref) {
              this.$refs[ref].resetFields();
            },
            changePage(currentPage) {
                var params = {
                    student_id: this.student_id,
                    page: currentPage,
                    pageSize: this.pageSize
                };
                if (this.form.query_field.trim().length !== 0) {
                    params.query_field = this.form.query_field;
                }
                this.loading = true;
                getRecommendInfo(params).then(response => {
                    this.tableData = response.data.list;
                    this.page = Number(response.data.pagination.current);
                    this.total = Number(response.data.pagination.total);
                    this.pageSize = Number(response.data.pagination.pageSize);
                    this.loading = false;
                }).catch( err => {
                    this.loading = false;
                });
            },
            changeStyle(row, column, rowIndex, columnIndex) {
                if (row.column.label == '已奖励') {
                    return 'color: green';
                } else if (row.column.label == '未结算奖励') {
                    return 'color: red';
                }
            }
        },
        mounted() {
          this.student_id = this.$route.query.student_id;
          recommendReward({student_id: this.student_id}).then(response => {
              this.reward.push({total:response.data.total, has_pay: response.data.has_pay, not_pay: response.data.not_pay});
              getRecommendInfo({student_id: this.student_id}).then(response => {
                  this.tableData = response.data.list;
                  this.page = response.data.pagination.current;
                  this.total = response.data.pagination.total;
                  this.pageSize = response.data.pagination.pageSize;
                  this.loading = false;
              }).catch( err => {
                  this.loading = false;
              })
              //开始获取数据
          }).catch(err => {

          })
        }
    }
</script>

<style scoped>
  .el-container {
    width: 80%;
    max-width: 100%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .el-header {
    text-align: center;
  }

  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-footer {
    text-align: center;
  }
</style>
